<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
      #div1{
          width: 300px;
          height: 300px;
          background-color: red;
      }
      #div2{
          width: 200px;
          height:200px;
          background-color: sandybrown;
      }
      #div3{
          width: 200px;
          height:200px;
          background-color: skyblue;
      }
      #div4{
          width: 200px;
          height:200px;
         background-color: springgreen;
      }
    </style>
</head>
<body>
<!-- 1.按钮和DIV的单击事件（三种绑定方式）-->
 
<!-- 按钮的单击事件 -->
<!-- 绑定方式一:标签内绑定 -->
  <button type="button" id="bent1" onclick="btnClick();">按钮</button>
<!-- 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式） -->
   <div id="div1" onclick="divOnclick();" onmouseenter="enterDiv();"onmouseleave="leaveDiv();" onmousemove="moveDiv()" ></div>
   <!-- 3.登入页面用户名输入框，密码输入框，提交按钮:
     3.1 用户名框获取焦点事件，控制台输出：用户在输入名
     3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
     3.3  密码框获取焦点事件，控制台输出：用户在输入密码
     3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
     3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’-->
     <form action="" method="post">
      <table>
          <tr>
              <td>
               用户名： <input type="text" id="username" value="" onfocus="usernameFocus()" onblur="usernameLeave();">
              </td>
          </tr>
          <tr>
              <td>
              密码： &nbsp;&nbsp;&nbsp;<input type="text" id="password"  value="" onfocus="passwordFocus()" onblur="passwordLeave();">
              </td>
          </tr>
          <tr>
              <td>
                <button type="submit" onclick="subClick()">提交</button>
              </td>
          </tr>
      </table>
     </form>

     <!--4.实现DIV  鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 --> 
       <div id="div2"  >打印hello world</div>
       <div id="div3" onmousemove="addListenter()">添加监听器</div>
       <div id="div4" onmousemove="removeListenter()">移除监听器</div>
</body>
<script type="text/javascript">
 // 1.按钮和DIV的单击事件
   function btnClick(){
       console.log('hello world')
   }

//1. 绑定方式二：JS中绑定
document.getElementById('bent1').onclick=btnClick;

//1.绑定方式三：
document.getElementById('bent1').addEventListener('click',function(){
    console.log('hello world');
})

 //2. 300px*300px的DIV 进入事件，离开事件，移动事件
   function divOnclick(){
       console.log('DIV被单击了')
   }
   function enterDiv(){
       console.log('进入DIV范围')
        document.getElementById('div1').style.backgroundColor='yellow'
   }
   function leaveDiv(){
       console.log('离开DIV的范围了')
       document.getElementById('div1').style.backgroundColor='greenyellow'
   }
   function moveDiv(){
       console.log('别摸我')
   }
// 2.绑定方式二：JS中绑定   
    document.getElementById('div1').onclick=divOnclick;
    document.getElementById('div1').onmouseenter=enterDiv;
    document.getElementById('div1').onmouseleave=leaveDiv;
    document.getElementById('div1').onmousemove=moveDiv;

// 3.登入页面用户名输入框，密码输入框，提交按钮:
// 3.1 用户名框获取焦点事件，控制台输出：用户在输入名
// 3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
// 3.3  密码框获取焦点事件，控制台输出：用户在输入密码
// 3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
// 3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
// 密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码
   function usernameFocus(){
       console.log('用户名正在输入')
   }
   function usernameLeave(){
       console.log('用户名输入完成')
       if (username.value =='') {
           alert('没有输入用户名')
       } 
   }
   function passwordFocus(){
       console.log('密码正在被输入')
   }
   function passwordLeave(){
       console.log('密码输入完成')
       if (password.value =='') {
           alert('没有输入密码')
       }
       
   }
   function  subClick(){
         var un=document.getElementById('username');
         var pw=document.getElementById('password');

         if (un.value =='' && pw.value =='') {
             alert('用户名和密码都为空')
             return
         }
         if (un.value =='') {
               alert("用户名为空")
               return
         }
         if (pw.value =='') {
             alert("密码为空")
             return
         }
        
   }
   
//4.实现DIV  鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
   
  function aa(){
      console.log('双击了DIV');
    
  }
   //添加监听器
  function addListenter(){
      document.getElementById('div2').addEventListener('mousemove',aa)
  }
  //移除监听器
    function removeListenter(){
        document.getElementById('div2').removeEventListener('mousemove',aa)
    }
</script>
</html>